<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
	<title>接单列表</title>
	<meta name="format-detection" content="telephone=no" />
		<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
	<link rel="stylesheet" href="/static/weixin/css/style.css" th:href="@{/weixin/css/style.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/dropload.css}" />
	<script type="text/javascript" src="../../static/weixin/js/zepto.min.js" th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/weui.min.js" th:src="@{/weixin/js/weui.min.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/dropload.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/adaptive.js" th:src="@{/weixin/js/adaptive.js}"></script>
</head>
<body>
	<section class="wrapper">
		<div class="searchBar box-h">
			<div class="flex tc menu">
				<span class="sort">全部行业</span>
				<ul name="industry" style="z-index:100; top: 100px; display: none;">
					<li value="">全部行业</li>
					<li  th:each="m:${majors}" th:value="${m.value}" th:text="${m.name}">办公</li>
				</ul>
			</div>
			<div class="flex tc menu">
				<span class="sort">全部地区</span>
				<ul name="district" style="z-index:100; top: 100px; display: none;">
					<li value="">全部地区</li>
					<li value="罗湖区">罗湖区</li>
					<li value="福田区">福田区</li>
					<li value="南山区">南山区</li>
					<li value="盐田区">盐田区</li>
					<li value="宝安区">宝安区</li>
					<li value="龙岗区">龙岗区</li>
					<li value="龙华区">龙华区</li>
				</ul>
			</div>
			<div class="flex tc menu">
				<span class="sort">全部风格</span>
				<ul name="style" style="z-index:100; top: 100px; display: none;">
					<li value="">全部风格</li>
					<li th:each="m:${styles}" th:value="${m.value}" th:text="${m.name}">新中</li>
				</ul>
			</div>
		</div>
		<ul class="houseList">
			
		</ul>
	</section>
	<script>
	var query = {"industry":"", "style":"", "district":""};
	$(function(){
		$('.menu').click(function () {
			var $menu = $(this).find('ul'),
			height = $('.tc').height()  + 5 + 'px',
			display = $menu.css('display');

			$('.menu ul').css({
				'top': '100px',
				'display': 'none'
			});
				
			if(display == 'none') {
				$menu.css({
				'top': height,
				'display': 'block'
				});
			}else {
				$menu.css({
				'top': 100,
				'display': "none"
				});
			}
		});
		
		$('.menu li').click(function(){
			$(this).parents(".menu").find("span").html($(this).text());
			query[$(this).parent().attr("name")] = $(this).attr("value");
			reload();
		})

	});    

	</script>
	
	<script  th:inline="JavaScript">
	var majors = /*[[${majors}]]*/ null;
    var styles = /*[[${styles}]]*/ null;
	//页数 
	$(function(){
		reload();
	});

	/*<![CDATA[*/
var page = 0;
function reload(){
	$('.houseList').html('');
    $('.dropload-down').remove();
    
    page = 0;
    $('.wrapper').dropload(opt);
}	           
var opt = {
    scrollArea : window,
    autoLoad : true,//自动加载
    loadDownFn : function(me){
     window.history.pushState(null, document.title, window.location.href);
        $.ajax({
            type: 'GET',
            url:'/mall/weixin/requirement/pick/allList?page='+page,
            data: query,
            dataType: 'json',
            success: function(data){
                if(data.content.length == 0){
                    me.lock();
                    me.noData();
                    me.resetload();
                    return;
                }

		        var result = '';
                for(var i=0; i< data.content.length; i++){
                  result+=content(data.content[i]);
                }
                
                $('.houseList').append(result);
                $(".houseList .flex").click(pick);
                page++;
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
};

function content(data){
	return '<li class="box-h"><div class="flex" id="'+data.id+'">'+
	'<p class="name">'+data.title+'</p>'+
	'<p class="tip">'+ellipsis(data.description)+'</p>'+
	'<p class="tagBox">'+
		'<span>'+data.size+' ㎡</span>'+
		'<span>'+dict(data.industry, majors)+'</span>'+
		'<span>'+dict(data.style, styles) +'</span>'+
	'</p>'+
	'<p class="price"><sub>￥</sub>'+data.budget+'</p>'+
	'</div></li>'
}

function dict(value, arr){
	for(var i in arr){
		if(value == arr[i]["value"])
			return arr[i]["name"];
	}
}
function pick(){
	var _this = $(this);
	weui.actionSheet([{
        label: '我要接单',
        onClick: function onClick() {
            var id = _this.attr("id");
            $.get("/mall/weixin/requirement/pick/" + id, function(){
            	//weui.alert("接单成功，请前往PC端查看详细信息");
            	//reload();
            	location.href="/mall/weixin/requirement/my";
            })
        }
    }], [{
        label: '取消',
        onClick: function onClick() {
        }
    }], {
        className: "custom-classname"
    });
}

function ellipsis(text){
	return (text.length > 20)? (text.substring(0, 80) + "...") : text ;
}
/*]]>*/
</script>   
</body>
</html>